/**
 * Created by sunguodong on 2021/12/30.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapCenter: React.FC = () => {

  	function componentDid() {
		esriLoader.loadModules([
			'esri/map',
			"esri/geometry/webMercatorUtils", 
		]).then(([Map, webMercatorUtils]) => {
			const map = new Map('mapCon', {
				basemap: 'topo-vector',
				center: [-122.45, 37.75],
				// zoom: 13,
				maxZoom:19,//最大空间等级
    			minZoom:5,//最小空间等级
				logo: false, // 不显示esri的logo
			});
			// 获取地图中心点坐标
            function getCenterPoint()
            {
                return map.extent.getCenter();
            }
			// 点击时获取中心点坐标
			map.on("click", function (event: any) {
				console.log(event);
				// 中心点
				var point = getCenterPoint();
                var newPoint = webMercatorUtils.webMercatorToGeographic(point);
                console.log("current map center point is x: " + point.getLatitude() + ", y: " + point.getLongitude());
			});
		}).catch(err => {
			console.error(err)
		})
	}

	useEffect(() => {
		return componentDid();
	}, []);

	function componentWillUn() {

	}

	useEffect(() => () => {
		return componentWillUn();
	}, []);

  	return (
		<div>
			<div id="mapCon"></div>
		</div>
	)
}
